<template>
    <div class="app-container">
        <div class="header">
            <el-button type="primary" size="mini" @click="opensaveSemesterForm">添加</el-button>
            <el-input style="width: 300px; margin-left: 100px;" v-model="semesterListForm.mimo" size="mini"
                placeholder="输入关键字搜索" @change="semesterSearch" @input="checkVal">
                <i slot="suffix" class="el-icon-search"></i>
            </el-input>
        </div>

        <!-- 添加学期弹出框 -->
        <el-dialog title="添加学期" :visible.sync="showSaveSemesterForm" :close-on-click-modal="false"
            @close="closeSaveSemesterForm">
            <el-form ref="saveSemesterForm" :model="saveSemesterForm" label-width="100px" :rules="saveSemesterRules">
                <el-form-item label="学期名称" prop="semesterMessage">
                    <el-input v-model="saveSemesterForm.semesterMessage"></el-input>
                </el-form-item>
                <el-form-item label="年月" prop="semesterDate">
                    <div class="block">
                        <el-date-picker @change="makeSaveSemesterDateYM" value-format="yyyy-MM"
                            v-model="saveSemesterForm.semesterDate" type="monthrange" range-separator="至"
                            start-placeholder="开始月份" end-placeholder="结束月份">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <template slot-scope="scope">
                        <el-button type="primary" @click="saveSemesterData" :loading="loading">提交</el-button>
                        <el-button @click="closeSaveSemesterForm">取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- 修改学期弹出框 -->
        <el-dialog title="修改学期" :visible.sync="showEditSemesterForm" :close-on-click-modal="false"
            @close="closeEditSemesterForm">
            <el-form ref="editSemesterForm" :model="editSemesterForm" label-width="100px" :rules="editSemesterRules">
                <el-form-item label="学期信息" prop="semesterMessage">
                    <el-input v-model="editSemesterForm.semesterMessage"></el-input>
                </el-form-item>
                <el-form-item label="年月" prop="semesterDate">
                    <div class="block">
                        <el-date-picker @change="makeEditSemesterDateYM" value-format="yyyy-MM"
                            v-model="editSemesterForm.semesterDate" type="monthrange" range-separator="至"
                            start-placeholder="开始月份" end-placeholder="结束月份">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item>
                    <template slot-scope="scope">
                        <el-button type="primary" @click="editSemesterData" :loading="loading">提交</el-button>
                        <el-button @click="closeEditSemesterForm">取消</el-button>
                    </template>
                </el-form-item>
            </el-form>
        </el-dialog>

        <div class="content">
            <el-table :data="semesterList" style="width: 100%;" stripe>
                <el-table-column label="学期信息">
                    <el-table-column label="学期名称" width="260" prop="semesterMessage">
                        <template slot-scope="scope">
                            <div>{{ scope.row.semesterMessage }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="开始年月" width="260" prop="semesterStart">
                        <template slot-scope="scope">
                            <div>{{ scope.row.semesterStart }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="结束年月" width="260" prop="semesterEnd">
                        <template slot-scope="scope">
                            <div>{{ scope.row.semesterEnd }}</div>
                        </template>
                    </el-table-column>
                </el-table-column>
                <el-table-column label="操作">
                    <el-table-column label="修改">
                        <template slot-scope="scope">
                            <el-button type="primary" circle icon="el-icon-edit"
                                @click="showEditSemester(scope.row.semesterId)"></el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="删除">

                        <template slot-scope="scope">
                            <el-button type="danger" circle icon="el-icon-delete"
                                @click="delSemester(scope.row.semesterId)"></el-button>
                        </template>
                    </el-table-column>

                </el-table-column>
            </el-table>
            <el-pagination @size-change="semesterSizeChange" @current-change="semesterCurrentChange"
                :page-size="semesterListForm.size" :page-sizes="[10, 20, 30]" layout="total, sizes, prev, pager, next"
                :total="semesterListTotal" style="margin-top: 20px;">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import utils from '@/utils/checkLogin'
import { getSemesterList, saveSemester, getUpdateSemesterInfo, editSemester, deleteSemester } from '../../api/api'
import { Message } from 'element-ui'
export default {
    data() {
        return {
            loading: false,
            semesterList: [],
            semesterListTotal: 0,
            semesterListForm: {
                mimo: '',
                page: 1,
                size: 10
            },
            showSaveSemesterForm: false,
            saveSemesterForm: {
                semesterDate: [],
                semesterStart: '',
                semesterEnd: '',
                semesterMessage: ''
            },
            saveSemesterRules: {
                semesterMessage: [
                    { required: true, message: '请输入学期信息', trigger: 'change' }
                ],
                semesterDate: [
                    {
                        type: 'array', required: true, message: '请选择年月', trigger: ['blur', 'change']
                    },
                ]
            },
            showEditSemesterForm: false,
            editSemesterForm: {
                semesterId: null,
                semesterStart: '',
                semesterEnd: '',
                semesterMessage: '',
                semesterDate: []
            },
            editSemesterRules: {
                semesterMessage: [
                    { required: true, message: '请输入学期信息', trigger: 'change' }
                ],
                semesterDate: [
                    {
                        type: 'array', required: true, message: '请选择年月', trigger: ['blur', 'change']
                    },
                ]

            },
        }
    },
    methods: {
        makeSaveSemesterDateYM(vm) {
            if (vm !== null) {
                this.saveSemesterForm.semesterStart = vm[0]
                this.saveSemesterForm.semesterEnd = vm[1]
            }
        },
        makeEditSemesterDateYM(vm) {
            if (vm !== null) {
                this.editSemesterForm.semesterStart = vm[0]
                this.editSemesterForm.semesterEnd = vm[1]
            }

        },
        getSemesterListData() {
            getSemesterList(this.semesterListForm).then((res) => {
                if (res.code == 200) {
                    this.semesterList = res.data
                    console.log('学期列表', res);
                    this.semesterListTotal = res.total
                }
            })
        },
        semesterSizeChange(e) {
            this.semesterListForm.size = e
            this.getSemesterListData()
        },
        semesterCurrentChange(e) {
            this.semesterListForm.page = e
            this.getSemesterListData()
        },
        // 搜索
        semesterSearch() {
            this.getSemesterListData()
        },
        // 如果搜索框的值为空，刷新一下学期列表
        checkVal() {
            if (this.semesterListForm.mimo == '') {
                this.getSemesterListData()
            }
        },
        opensaveSemesterForm() {
            this.showSaveSemesterForm = true
        },
        closeSaveSemesterForm() {
            this.showSaveSemesterForm = false
            console.log('关闭');
            this.$nextTick(() => {
                this.$refs.saveSemesterForm.resetFields()
            })
        },
        closeEditSemesterForm() {
            this.showEditSemesterForm = false
        },
        showEditSemester(semesterId) {
            this.showEditSemesterForm = true
            this.editSemesterForm.semesterId = semesterId
            let data = {
                semesterId
            }
            getUpdateSemesterInfo(data).then((res) => {
                if (res.code == 200) {
                    console.log('修改学期（数据回显）', res)
                    this.editSemesterForm.semesterMessage = res.data.semesterMessage
                    let tmpArr = []
                    tmpArr.push(new Date(res.data.semesterStart))
                    tmpArr.push(new Date(res.data.semesterEnd))
                    this.editSemesterForm.semesterDate = tmpArr
                }
            })

        },

        editSemesterData() {
            console.log(JSON.stringify(this.editSemesterForm))
            this.$refs.editSemesterForm.validate(valid => {
                if (!valid) {
                    Message({
                        message: '请检查表单',
                        type: 'warning',
                        duration: 2000
                    })
                    return false
                } else {
                    editSemester(this.editSemesterForm).then((res) => {
                        if (res.code == 200) {
                            Message({
                                message: '修改成功',
                                type: 'success',
                                duration: 3000
                            })
                            console.log('修改学期', res)
                            this.loading = true
                            setTimeout(() => {
                                this.showEditSemesterForm = false
                                this.loading = false
                                this.getSemesterListData()
                            }, 2000)

                        } else {
                            Message(({
                                message: '修改失败',
                                type: 'success',
                                duration: 2000
                            }))
                        }
                    })
                }
            })

        },
        // 保存提交学期
        saveSemesterData() {
            this.$refs.saveSemesterForm.validate(valid => {
                if (!valid) {
                    Message({
                        message: '请检查表单',
                        type: 'warning',
                        duration: 2000,
                    })
                    return false
                } else {
                    console.log(JSON.stringify(this.saveSemesterForm))
                    this.$refs.saveSemesterForm.validate(valid => {
                        if (!valid) {
                            Message({
                                message: '请检查表单！',
                                type: 'warning',
                                duration: 2000
                            })
                            return false
                        } else {
                            saveSemester(this.saveSemesterForm).then((res) => {
                                if (res.code == 200) {
                                    console.log('添加学期', res)
                                    Message({
                                        message: '添加成功',
                                        type: 'success',
                                        duration: 2000
                                    })
                                    this.getSemesterListData()
                                    setTimeout(() => {
                                        this.showSaveSemesterForm = false
                                        this.$nextTick(() => {
                                            this.$refs.saveSemesterForm.resetFields()
                                        })
                                    }, 1500)
                                } else {
                                    Message({
                                        message: '添加成失败',
                                        type: 'warning',
                                        duration: 2000
                                    })
                                }
                            })
                        }
                    })
                }
            })

        },
        delSemester(id) {
            let obj = {
                semesterId: id,
            }
            this.$confirm('是否删除该学期?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteSemester(obj).then((res) => {
                    if (res.code == 200) {
                        console.log('删除成功', res);
                        this.$message({
                            type: 'success',
                            message: '删除成功',
                            duration: 3000
                        })
                        this.getSemesterListData()
                    } else {
                        this.$message({
                            type: 'error',
                            message: '删除失败',
                            duration: 3000
                        })
                    }
                })
            }).catch(() => {
            })
        },
    },
    created() {
        utils.checkLogin()
        this.getSemesterListData()
    }
}
</script>

<style lang="less" scoped>
.app-container {
    padding: 40px;

    .header {
        align-items: center;
        display: flex;
        margin-bottom: 20px;

        .el-icon-search {
            cursor: pointer;
            margin-right: 4px;
            margin-top: 8px;
        }

    }

    .blueBack {
        .el-select-dropdown__item {
            // height: 80px;
        }
    }


    .content {
        text-align: center;

        .el-select-dropdown__item {
            height: auto;
        }
    }
}
</style>